/**
 * @description  : 自定义导航栏
 * @descriptionDetail : 自定义导航栏
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-03 16:44:32
 */
<template>
  <view :class="customClass">
    <u-navbar
      :isFixed="isFixed"
      :backTextStyle="backTextStyle"
      :backIconSize="backIconSize" 
      :backText="backText" 
      :backIconName="backIconName" 
      :isBack="isBack"
      :title="title" 
      :immersive="immersive"
      :borderBottom="borderBottom"
      :zIndex="zIndex"
      :titleWidth="titleWidth"
      :titleSize="titleSize"
      :customBack="customBack"
      :backIconColor="backIconColor" 
      :titleColor="titleColor" 
      :titleBold="true"
      :background="background"
      :height="height"
    >
      <template class="slot-wrap" v-if="isRight" #right>
        <slot></slot>
      </template>
      <template class="slot-wrap" v-if="!isRight">
        <slot></slot>
      </template>
    </u-navbar>
  </view>
</template>

<script>
export default{
  name:"INavbar",
  props:{
    height: {
      type: Number,
      default: 44,
    },
    // 左边返回的图标
    backIconName: {
      type: String,
      default: 'nav-back',
    },
    // 左边返回图标的大小，rpx
    backIconSize: {
      type: [String, Number,],
      default: '44',
    },
    // 返回的文字提示
    backText: {
      type: String,
      default: '',
    },
    // 导航栏标题
    title: {
      type: String,
      default: '',
    },
    // 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
    titleWidth: {
      type: [String, Number,],
      default: '350',
    },
    // 标题的字体大小
    titleSize: {
      type: [String, Number,],
      default: 32,
    },
    isBack: {
      type: [Boolean, String,],
      default: true,
    },
    isWhite:{
      type:Boolean,
      default:false,
    },
    isTransport:{
      type:Boolean,
      default:false,
    },
    // 导航栏是否固定在顶部
    isFixed: {
      type: Boolean,
      default: true,
    },
    // 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
    immersive: {
      type: Boolean,
      default: false,
    },
    // 是否显示导航栏的下边框
    borderBottom: {
      type: Boolean,
      default: true,
    },
    zIndex: {
      type: [String, Number,],
      default: '',
    },
    // 自定义返回逻辑
    customBack: {
      type: Function,
      default: null,
    },
    // 是否右边
    isRight: {
      type: Boolean,
      default: true,
    },
    // 是否自定义背景颜色
    backColor:{
      type: String,
      default: '',
    },
	customClass:{
	  type:String,
	  default:'',
	}
  },
  data() {
    return {
		
    }
  },
  computed:{
  // 返回箭头的颜色
    backIconColor:function() {
      return this.isWhite ? '#333333' : 'white';
    },
    // 返回的文字的 样式
    backTextStyle: function(){
      return this.isWhite ? {
        color: '#333333',
      } : {
        color: 'white',
      }
    },
    // 标题的颜色
    titleColor: function(){
      return this.isWhite ? '#333333' : 'white';
    },
    // 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
    background: function(){
      if(this.isWhite){
        return {
          background: '#ffffff',
        };
      }
      if(this.isTransport){
        return {
          background: 'transparent',
        };
      }
      return {
        background: this.backColor ? this.backColor : this.$theme['u_type_primary'],
      };
    },
  },
  methods: {
	
  },
}
</script>

<style scoped lang="scss">
	.slot-wrap {
			display: flex;
			justify-content: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			padding: 0 30rpx;
		}
</style>
